<template>
    <div>
        <h1>登录</h1>
        <form @submit.prevent="login">
            <input v-model="username" placeholder="用户名" />
            <input v-model="password" type="password" placeholder="密码" />
            <button type="submit">登录</button>
        </form>
        <div v-if="loginMessage">{{ loginMessage }}</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 定义响应式数据
const username = ref('');
const password = ref('');
const loginMessage = ref('');

// 登录函数
const login = async () => {
    try {
        // 发送登录请求
        const response = await axios.post('http://127.0.0.1:5000/login', { username: username.value, password: password.value });
        // 更新登录消息
        loginMessage.value = response.data.message;
    } catch (error) {
        // 处理错误
        if (error.response) {
            loginMessage.value = error.response.data.error;
        } else {
            loginMessage.value = '请求出错，请稍后再试';
        }
    }
};
</script>

<style scoped>
h1 {
    font-family: 'Microsoft YaHei', sans-serif; /* 使用支持中文的字体 */
    color: black; /* 设置合适的文字颜色 */
}
form {
    margin-bottom: 20px;
}
</style>